<template>
<BaseDialog v-model="isShow" title="下一个审批节点" @confirm="confirm"  @close="close" icon="icons:clarity:tasks-line">
  <el-card shadow="always" class="mb-2.5" v-for="(node,index) in task.nodes">
    <template #header>
      <div class="flex w-full">
        <div class="flex-1">
          <span>{{node.name}}</span>
        </div>
        <div>
          <el-button @click="addUser(index)" type="primary" link>新增</el-button>
        </div>
      </div>
    </template>
    <el-tag @close="delUser(index,inx)" class="mr-2.5" closable v-for="(user,inx) in node.users">{{user.realName}}</el-tag>
  </el-card>
  <SelectUserDialog  ref="selectUserDialogRef"></SelectUserDialog>
</BaseDialog>
</template>

<script setup lang="ts">
import {NextTaskModel} from "/@/api/flow/model/FlowBaseModel";
import {ref, shallowRef} from "vue";
const selectUserDialogRef = ref()
const isShow = ref(false)
const title = ref('')
const task = ref<NextTaskModel>({
  nodes: [],
  variables: {}
})
const confirmFunction = shallowRef<Function>()
const init = (nextTask: NextTaskModel,confirm: Function) => {
  confirmFunction.value = confirm
  task.value = nextTask
  isShow.value = true
}
const close = () => {
  isShow.value = false
}
const delUser = (index: number,inx: number) => {
  task.value.nodes[index].users.splice(inx,1)
}
const addUser = (index: number) => {
  selectUserDialogRef.value.init(task.value.nodes[index].users,(users)=>{
    task.value.nodes[index].users = users
  })
}
const confirm = () => {
  task.value.nodes.forEach(res=>{
    task.value.variables[res.id] = res.users.map(res=> res.userId).join(',')
  })
  confirmFunction.value?.call(null,task.value)
}
defineExpose({init})
</script>

<style scoped>

</style>